<template>
    <div class="page-wrap">
        <h-section title="同步设置" collapse>
            <div class="font-w-b font-s-base">飞书账号凭证：</div>
            <div class="margin-t-8">
                <flexbox>
                    <div class="font-s-base">
                        <span>用户访问凭证 (user_access_token):</span>
                        <span class="margin-l-8">{{ info.fsRefreshToken }}</span>
                    </div>
                    <span class="font-s-base error-color margin-l-16">
                        {{ info.accountStatus }}
                    </span>
                    <a-button type="primary" class="font-s-base margin-l-16" @click="getCode" v-if="info.accountStatus === '未登录'">登录飞书</a-button>
                    <a-button type="primary" class="font-s-base margin-l-16" @click="getCode" v-if="info.accountStatus === '已失效'">重新获取</a-button>
                    <a-button type="primary" class="font-s-base margin-l-16" @click="getCode" v-if="info.accountStatus?.indexOf('失效日期') >= 0">刷新登录凭证</a-button>
                </flexbox>
                <flexbox>
                    <div class="font-s-base">
                        <span>应用唯一标识 (app_id):</span>
                        <span class="margin-l-8">{{ info.appId }}</span>
                    </div>
                </flexbox>
            </div>
        </h-section>

        <RelativeTableA :list="userTempInfoList" :info="info" @success="getUserTempInfoList" />
        <RelativeTableB :list="fsFileTempList" :info="info" @success="getFsFileTempList" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import RelativeTableA from './RelativeTableA/index.vue';
import RelativeTableB from './RelativeTableB/index.vue';
import defaultSettings from '@/config/defaultSettings';
import { message } from 'ant-design-vue/es';
import { defineComponent, ref, unref, reactive, toRefs, computed } from 'vue';
import { useRoute } from 'vue-router';
export default defineComponent({
    components: {
        RelativeTableA,
        RelativeTableB
    },
    setup() {
        const route = useRoute();
        const state = reactive<any>({
            visible: false,
            info: {},
            userTempInfoList: [],
            fsFileTempList: []
        });
        const getCode = () => {
            const { production } = defaultSettings;
            const { hostname } = document.location;
            const ip = production ? `${hostname}:20018` : '10.141.51.6:20018';
            let appId = 'cli_a384732ec7bed00e';
            if (hostname === '10.142.14.27') {
                appId = 'cli_a386df3daff8500e';
            }
            window.open(`https://open.feishu.cn/open-apis/authen/v1/index?redirect_uri=http://${ip}/tool/feishu&app_id=${appId}&state=zzkTest`);
        };
        const getInfo = async () => {
            const { success, moule } = await api.uacModel.getAccountInfo();
            if (success) {
                state.info = moule;
                if (state.info.accountStatus !== '未登录') {
                    getUserTempInfoList();
                    getFsFileTempList();
                } else {
                    state.userTempInfolist = [];
                }
            }
        };
        // 生成需求台账多维表格数据
        const getUserTempInfoList = async () => {
            const { success, moule } = await api.feishuModel.findUserTempInfos();
            if (success) {
                state.userTempInfoList = [...moule];
            }
        };
        // 同步需求信息到指定多维表格数据
        const getFsFileTempList = async () => {
            const { success, moule } = await api.fsFileSyncTmplModel.selectPage();
            if (success) {
                state.fsFileTempList = [...moule];
            }
        };
        const init = async () => {
            getInfo();
            if (route.query.code) {
                const query = {
                    code: route.query.code
                };
                const { success, errorMsg } = await api.uacModel.saveAccountInfo(query);
                if (!success) {
                    message.error(errorMsg);
                    return;
                }
                getInfo();
            }
            if (Reflect.has(route.query, 'code')) {
                // 删除url中的code,避免刷新重复调用接口
                window.history.replaceState(null, '', 'feishu');
            }
        };
        init();
        return {
            ...toRefs(state),
            getCode,
            getUserTempInfoList,
            getFsFileTempList
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    background: #fff;
}
</style>